<template>
    <div>
      <Header></Header>
      <div class="admin_main">
      	<div class="crumbs-nav">
      		<router-link to="/">首页</router-link> &gt; <span>添加课程</span>
	        </div>
	        <h2 class="admin-title">添加课程</h2>

	        <div class="main-form">
            <div class="form-li">
              <label for="title">课程主题：</label>
              <div class="form-box">
                <input type="text" placeholder="请输入课程名称" id="title" v-model="todos[0].title">
              </div>
            </div>
            <div class="form-li">
              <label for="author">主讲人：</label>
              <div class="form-box">
                <input type="text" placeholder="请输入主讲人" id="author" v-model="todos[0].author">
              </div>
            </div>
            <div class="form-li">
              <label for="start_time">开始时间：</label>
              <div class="form-box">
                <input type="text" placeholder="点击设置课程开始日期" id="start_time" v-model="todos[0].start_time">
              </div>
            </div>
            <div class="form-li">
              <label for="end_time">结束时间：</label>
              <div class="form-box">
                <input type="text" placeholder="点击设置课程结束日期" id="end_time" v-model="todos[0].end_time">
              </div>
            </div>
            <div class="form-li">
              <label></label>
              <div class="form-box">
                <input type="submit" value="提交" @click="posts">
              </div>
            </div>
	        </div>
      </div>
    </div>
</template>

<script>
import Header from '../comments/header'
import qs from 'qs'
export default {
  name: 'homeAdd',
  components: {
    Header
  },
  data () {
    return {
      todos: [
        {
          title : '',
          author: '',
          start_time: '',
          end_time: ''
        }
      ]
    }
  },
  mounted() {
    laydate.render({
      elem: "#start_time", // 指定元素
      type: "datetime", // 组件的类型：year,month,time···
      done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
        // 把选择的时间赋值给先前定义好的变量，显示在页面
        this.todos[0].start_time = value;
      }
    });
    laydate.render({
      elem: "#end_time", // 指定元素
      type: "datetime", // 组件的类型：year,month,time···
      done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
        // 把选择的时间赋值给先前定义好的变量，显示在页面
        this.todos[0].end_time = value;
      }
    });
  },
  methods: {
    posts () {
      this.$axios.post('/api/home_add',qs.stringify({addContent:this.todos}, { indices: false }))
        .then(res=>{
          if(!res.data.code){
            alert(res.data.message);
            window.location.reload();
          }
        })
        .catch(err=>{
          console.log(err);
        })
    }
  }
}
</script>
